<template>
  <div class="page">
  <div class="swiper">
    <div class="box" @mouseout="out" @mouseover="over">
      <img
        v-for="(item, index) in imgList"
        v-show="listIndex === index"
        :key="index"
        :src="item"
        alt=""
      />
      <ul>
        <li
          v-for="(item, index) in imgList"
          @click="changePage(index)"
          :key="index"
          :style="{'background':index == listIndex ? 'red' :''}"
        ></li>
      </ul>
    </div>
  </div>
  <div class="menu">
  <div class="item" @click="goPage()" v-for="(item,key) in menuList" :key="key">
  <img :src="item.img" alt="">
  <div>{{item.label}}</div>
  </div>
  </div>
<div class="bg"></div>
<div class="bg bg1"></div>
<div class="bg" style="height:4px"></div>
<div class="content">
<div class="title">
<span class="left_title">最新资讯</span>
<span class="right_title" @click="goPage()">更多 ></span>
</div>
<section class="list" v-for="(item,i) in list" :key="i">
<section class="list-left">
<div class="content_text">{{item.title}}</div>
<div class="bot-text"><span>{{item.time}}</span><span class="ml-10">{{item.num}}阅读</span><span class="ml-10">{{item.comment}}评论</span></div>
</section>
<section class="list-right">
<img :src="item.img" alt="">
</section>
</section>
</div>

  </div>
</template>

<script>
import {data} from "./data"
    export default {
        name: "index",
        data(){
          return {
            listIndex:0,
            timer: null, //定时器
            list: data, //最新资讯json数据
            //轮播图图片地址
            imgList:[
              'https://img0.baidu.com/it/u=1705694933,4002952892&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
              'https://img2.baidu.com/it/u=483398814,2966849709&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
              'https://img1.baidu.com/it/u=3573056321,2239143646&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
              'https://img1.baidu.com/it/u=1308526554,393095433&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
            ],
            //中间
            menuList:[{
              label:"资讯列表",
              img:"https://img0.baidu.com/it/u=2273592468,519517289&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
            },{
              label:"三合一课",
              img:"https://img0.baidu.com/it/u=2273592468,519517289&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
            },{
              label:"主题党日",
              img:"https://img0.baidu.com/it/u=2273592468,519517289&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
            },{
              label:"党务知识",
              img:"https://img0.baidu.com/it/u=2273592468,519517289&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
            },{
              label:"谈话谈心",
              img:"https://img0.baidu.com/it/u=2273592468,519517289&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
            }],

          }
        },
         computed: {
    //上一张
    prevIndex() {
      if (this.listIndex == 0) {
        return this.list.length - 1;
      } else {
        return this.listIndex - 1;
      }
    },
    //下一张
    nextIndex() {
      if (this.listIndex == this.list.length - 1) {
        return 0;
      } else {
        return this.listIndex + 1;
      }
    },
  },
   created() {
    //定时器
    this.setTimer();
  },
         methods:{
           changePage(index) {
      this.listIndex = index;
    },
    //移除
    out() {
      this.setTimer();
    },
    //移入
    over() {
      clearInterval(this.timer);
    },
    //1秒切图
    setTimer() {
      this.timer = setInterval(() => {
        this.listIndex++;
        if (this.listIndex == this.list.length) {
          this.listIndex = 0;
        }
      }, 1500);
    },
          goPage(url){
            if(!url) return;
            wx.navigateTo({
          url:url
        })
      }
    }
    }
</script>

<style scoped>
.page {
  width: 100%;
  height: 100vh;
  background: #fff;
  overflow-y: auto;
}
.swiper {
  width: 100%;
  height: 30vh;
  overflow: hidden;
}
.swiper .box {
  position: relative;
}
.swiper img {
  width: 100%;
  height: 100%;
}
.menu {
  display: flex;
  justify-content: space-between;
  height: 80px;
  margin-top: 10px;
}
.menu .item {
  width: 20%;
  height: 75px;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
}
.menu .item img {
  display: inline-block;
  width: 50px;
  height: 50px;
}
.menu .item div {
  font-size: 12px;
  margin-top: 3px;
}
.bg {
  width: 100%;
  height: 8px;
  background-color: #eee;
}
.bg1 {
  height: 50px;
  background-color: #fff;
}
.content {
  height: 65vh;
  overflow: hidden;
}
.title {
  display: flex;
  justify-content: space-between;
  padding: 5px;
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  height: 30px;
}
 ul {
      list-style: none;
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      width: 80px;
      height: 20px;
      top: 86%;
      right: 35%;
 }

ul li {
        cursor: pointer;
        width: 10px;
        height: 10px;
        background: white;
        border-radius: 50%;
    }
.left_title {
  font-weight: 700;
  font-size: 14px;
  padding-left: 8px;
  position: relative;
}

.left_title::before {
  content: "";
  width: 3px;
  height: 100%;
  background: red;
  position: absolute;
  left: 0;
  top: 0;
}
.right_title {
  color: #ccc;
  margin-top: 3px;
}
.list {
  display: flex;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding-left: 5px;
  height: 70px;
  border-bottom: 3px solid #eee;
  margin-top: 10px;
}
.list-left {
  width: 65%;
}
.list-left .content_text {
  width: 98%;
  height: 38px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  line-clamp: 2;
  line-height: 1.5em;
}
.list-right {
  width: 35%;
  height: 60px;
}
.list-right img {
  width: 100%;
  height: 100%;
}
.bot-text {
  color: #ccc;
  font-size: 12px;
  margin-top: 10px;
}
.ml-10 {
  margin-left: 10px;
}
</style>
